//1.引入Vue
import Vue from "vue";
//2.引入VueRouter
import VueRouter from "vue-router";

//引入组件
import Loagin from "../pages/Login";
import Home from "../pages/Home";
import Music from "@/pages/Home/Music/Music";
import News from "@/pages/Home/News/News";
//3.使用路由器 (本质是插件)
Vue.use(VueRouter);

//4.创建并暴露Router实例
export default new VueRouter({
  //在实例化路由器对象的配置中,书写路由表配置
  routes: [{
      path: "/login",
      component: Loagin
    },
    {
      path: "/home",
      component: Home,
      children: [{
          name: "music",
          // 一个“路径参数”使用冒号 : 标记。
          // 也可以传递一个可选的路径参数 一般都放在结尾 ？
          path: "music/:id/:times?",
          //第一种方式：为了在组件中便捷的收到params传递过来的路径参数 在这里可以配置开启props
          props: true,
          component: Music
        },
        {
          name: "news",
          path: "news",
          component: News,
          //路由配置中props的第三种写法（函数），作用：将函数返回的那个对象中每一组key-value都以以props的形式传递给路由组件,函数默认接收一个route对象做为参数，可以快速拿query的值
          props(route) {
            console.log(route);
            return route.query
          }
        },
      ],
    },
    // 一级路由的重定向 通过路由规则的redirect属性，指定一个新的路由地址，可以很方便地设置路由的重定向
    {
      path: "",
      redirect: "/home"
    },
  ],
});